@extends('layout')
@section('css')
<style> 
    body,html{
        height:100%;
    }
    .content{
        height:100%;
    }
    .form-group{
        width:6rem;
        margin:auto;
        background-color:rgba(0,0,0,0.4);
        border-radius:0.1rem;
        padding:0.2rem;
    }
    #phone{
        margin:0.3rem 0;
    }
    .phoneLabel{
        font-size:0.3rem;
        text-align:center;
        display:block;
    }
    .title{
        text-align:center;
        font-size:0.4rem;
        color:#f9cc6d;
    }
    .mylable{
        color:#f1f1f1;
        font-size:0.3rem;
    }
    .myinput{
        border:1px solid #c79f41;
        font-size:0.32rem;
        border-radius:0.1rem;
        border-width:0.05rem;
    }
    #code{
        width:2rem;
    }
    .sendCode{
        width:1.7rem;
        height:0.6rem;
        vertical-align:bottom;
        background-size:100% 100%;
        display:inline-block;
        background-color:#e7ba5c;
        font-size:0.23rem;
        text-align:center;
        padding:0.1rem;
        border-color:#e7ba5c;
    }
    .summit{
        background-image:url("{{URL::asset('img/summit.png')}}");
        height:0.7rem;
        background-size:100% 100%;
        margin-top:0.3rem;
    }
</style>
@endsection
@section('content')
<div>
    <img src="{{URL::asset('img/banner.png')}}" width="100%">
    <div class="form-group">
        <p  class="title">验证手机号</p>
        <div>
            <lable for="phone" class="mylable">输入手机号</lable>
            <input type="tel" id="phone" class="myinput">
        </div>
        <div>
            <lable for="code" class="mylable">输入验证码</lable>
            <input type="tel" id="code" class="myinput">
            <button class="sendCode">发送验证码</button>
        </div>
        <div class="summit"></div>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="prompt">
    <div class="modal-dialog" role="document">
        <div class="background">
            <div class="title">温馨提示</div>
            <div class="text"></div>
            <div>
                <div class="sure" data-dismiss="modal">好的!</div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    var share_id = "{{$share_id}}";
    if(share_id==""){
        alert('参数缺失,无法参加活动');
        location.href = '/';
    }
    $('.sendCode').on('click',function(){
        var phone = $('#phone').val();  
        settime(60);
        $.ajax({
            url:'/sendCode',
            data:{'phone':phone},
            dataType:'JSON',
            type:'POST',
            success:function(data){
                if(data.code==201){
                    $('#prompt').modal('show');
                    $('#prompt .text').text(data.msg);
                }else{
                    $('#prompt').modal('show');
                    $('#prompt .text').text(data.msg);
                }
            }
        });
    });
      //倒计时函数
    function settime(countdown) {
        var t;
        if (countdown === 0) {
            $(".sendCode").removeAttr("disabled").text("获取验证码");
            clearTimeout(t);
        } else {
            $(".sendCode").css('background-color','#cec2ab').css('border-color','#cec2ab').prop("disabled", true).text("重新发送"+countdown+"s");
            countdown--;
            t = setTimeout(function() {
                settime(countdown);
            },1000);
        }
    }
    $('.summit').on('click',function(){
        var phone = $('#phone').val();
        var code = $('#code').val();
        $.ajax({
            url:'/getUserId',
            data:{'phone':phone,'code':code},
            dataType:'JSON',
            type:'POST',
            success:function(data){
                return;
                if(data.code==201){
                    location.href='https://app.hxsapp.com/hxsweb/signUpPageAct?jump_url=http://hxsh5.fsgit.cn/couplet';
                }else if(data.code==202){
                    $('#prompt').modal('show');
                    $('#prompt text').text(data.msg);
                }else {
                    location.href='/couplet?share_id='+share_id+'&share=true';
                }
            }
        });
    });
</script>
@endsection